<%--
  Created by IntelliJ IDEA.
  User: 14648
  Date: 2021/10/29
  Time: 13:56
  To change this template use File | Settings | File Templates.
--%>
<%@ include file="../common/IncludeTop.jsp"%>

<style>

    body{
    background: 	#8FBC8F ;
    }

    .button{
        cursor: pointer;
        width: 180px;
        line-height: 38px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        text-shadow:1px 1px 1px #333;
        border-radius: 5px;
        margin:0 20px 20px 0;
        position: relative;
        overflow: hidden;
    }
    .button:nth-child(6n){
        margin-right: 0;
    }
    .button.green{
        border:1px solid #64c878;
        box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
        background: -webkit-linear-gradient(top,#90dfa2,#84d494);
        background: -moz-linear-gradient(top,#90dfa2,#84d494);
        background: linear-gradient(top,#90dfa2,#84d494);
    }
    .green:hover{
        background: -webkit-linear-gradient(top,#aaebb9,#82d392);
        background: -moz-linear-gradient(top,#aaebb9,#82d392);
        background: linear-gradient(top,#aaebb9,#82d392);
    } .green:active{
          top:1px;
          box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
          background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
          background: -moz-linear-gradient(top,#5eac6e,#72b37e);
          background: linear-gradient(top,#5eac6e,#72b37e);
      }



</style>
<div id="Welcome">
    <div id="WelcomeContent">
        Welcome to MyPetStore!
    </div>
</div>

<div id="Main">
    <div id="Sidebar">
        <div id="SidebarContent">
            <a href="viewCategory?categoryId=FISH"><img src="images/fish_icon.gif" alt="中国人不骗中国人"/></a>
            <br/> Saltwater, Freshwater <br/>
            <a href="viewCategory?categoryId=DOGS"><img src="images/dogs_icon.gif" alt="" /></a>
            <br /> Various Breeds <br />
            <a href="viewCategory?categoryId=CATS"><img src="images/cats_icon.gif"  alt=""/></a>
            <br /> Various Breeds, Exotic Varieties <br />
            <a href="viewCategory?categoryId=REPTILES"><img src="images/reptiles_icon.gif" alt="" /></a>
            <br /> Lizards, Turtles, Snakes <br />
            <a href="viewCategory?categoryId=BIRDS"><img src="images/birds_icon.gif" alt="" /></a>
            <br /> Exotic Varieties
        </div>
    </div>
    <style type="text/css">
        .container {
            margin-top: 130px;
        }
        .tip {
            padding: 8px 12px;
            width: 140px;
            display: block;
            font-size: 16px;
            color: #fff;
            font-weight: bold;
            background: #ED5517;
            cursor: pointer;
            margin-left: 400px;
            align-content: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .ImageContent{

        }
        .content {
            float: right;
            position: absolute;
            display: none;
            padding: 10px;
            background: #e0edf7;
            border-radius: 6px;
            z-index: 1;
        }
        .content::before {
            position: relative;
            width: 0;
            height: 0;
            display: block;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #e0edf7;
        }
    </style>
    <script>
        var selectEle;
        $(function () {
            $('#BIRDS,#FISH,#CATS,#DOGS,#REPTILES,#BIRDS1').hover(function () {
                selectEle = this;
                $.ajax({
                    type: "get",
                    url: "showProduct?categoryId=" + this.alt,
                    success: function (data) {
                        //$(eleId).after("<div>new div</div>");
                        show_xszimg(this, data);
                    }

                });
            }, function () {
                hide_xszimg(this);
            })

            function hide_xszimg(f) {
                $('#birdsDialog').remove().empty();
            }

            function show_xszimg(f, data) {
                var res = selectEle.coords.split(",");
                var a = $(selectEle).offset().left;
                var b = $(selectEle).offset().top;
                a+=parseInt(res[1])-10;
                b+=parseInt(res[3])-10;
                    var newTable=$(selectEle).after('<div id="birdsDialog" style="position: absolute;display: none;padding: 10px;background: #e0edf7;border-radius: 6px;z-index: 1;overflow: hidden">'+
                    '<table id="showTable"> </table> </div>');
                    var groupTable = $('#showTable');
                    groupTable.empty();
                    for(var i = 0 ;i <data.length;i++){
                        var item = data[i];
                        groupTable.append('<tr> ' +
                            '<td><a href="viewProduct?productId='+item.productId+'">' + item.productId + '</a></td>' +
                            '<td>' + item.name +
                            '</tr>')
                    }
                   $('#birdsDialog').offset({left:a,top:b}).show("slow");
                }
            });
    </script>

    <div id="MainImage">
        <div id="MainImageContent"class="ImageContent">
            <map name="estoremap">
                <area id="BIRDS" alt="BIRDS" coords="72,2,280,250" href="viewCategory?categoryId=BIRDS" shape="rect" />
                <area id="FISH"alt="FISH" coords="2,180,72,250" href="viewCategory?categoryId=FISH" shape="rect" />
                <area id="DOGS"alt="DOGS" coords="60,250,130,320" href="viewCategory?categoryId=DOGS" shape="rect" />
                <area id="REPTILES"alt="REPTILES" coords="140,270,210,340" href="viewCategory?categoryId=REPTILES" shape="rect" />
                <area id="CATS"alt="CATS" coords="225,240,295,310" href="viewCategory?categoryId=CATS" shape="rect" />
                <area id="BIRDS1"alt="BIRDS" coords="280,180,350,250" href="viewCategory?categoryId=BIRDS" shape="rect" />
            </map>
            <img height="355" src="images/splash.gif" align="middle" usemap="#estoremap" width="350" />
        </div>

    </div>

    <div id="Separator">&nbsp;</div>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>